<template>
  <header id="head_top">
    <van-nav-bar :fixed="fixed" :zIndex="zIndex">
      <van-icon name="arrow-left" slot="left" v-if="goBack" @click="goBackFun"/>
      <div v-if="searchPage" slot="right">
        <router-link :to="{path: searchPage, query:{areaId:areaId}}">
          <van-icon name="search"/>
        </router-link>
      </div>

      <section class="title_head ellipsis" v-if="headTitle" slot="title">
        <span class="title_text">{{headTitle}}</span>
      </section>
    </van-nav-bar>
  </header>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      fixed:true,
      zIndex:1000
    };
  },
  mounted() {},
  props: ["headTitle", "goBack", "searchPage","backNum","areaId"],
  computed: {},
  methods: {
    goBackFun(){
      console.log(this.backNum);
      if(this.backNum){
        this.$router.go(-this.backNum);
      }else{
        this.$router.go(-1);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../style/mixin";
.van-nav-bar {
  .van-icon {
    color: #1b1c1d;
    vertical-align: middle;
    font-size: px2Rem(20);
    font-weight: bold;
  }
}
.head_goback {
  left: px2Rem(8);
  @include wh(px2Rem(12), px2Rem(20));
  line-height: px2Rem(44);
  margin-left: px2Rem(8);
}
</style>
